<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>文件管理</title>
    <th:block th:replace="~{commons/commons::head}"/>
    <script src="/static/js/vue/vue.min.js"></script><!--vue.js-->
    <script src="/static/js/page.min.js"></script><!--分页组件-->
</head>
<style>
    .tabItem{
        display: inline-block;
        width: 289px;
        height: 318px;
        margin: 15px 10px;
    }
    .tabItem .card-body{
        text-align: center;
    }
    .card-img-top{
        width: 100%;
        height: 190px;
    }
</style>
<body>

<div th:replace="~{commons/commons::top}"></div>

<div id="app">
    <div class="container-fluid">

        <!--表格-->
        <div class="container" style="margin-top: 50px;max-width: 1325px">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <span class="lead">视频列表</span>
                        </div>
                        <div class="card-body">
                            <span id="introduction"><mark></mark></span>
                        </div>
                        <div class="table-responsive">

                            <!--标签页导航-->
                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="cyyBtn" @click="toggle(1,'cyy')" data-toggle="tab" href="#cyy">
                                        <h6>C语言</h6>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="eeBtn" @click="toggle(2,'ee')" data-toggle="tab" href="#ee">
                                        <h6>javaEE开发</h6>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="mysqlBtn" data-tid="3" data-toggle="tab" href="#mysql">
                                        <h6>mysql</h6>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="htmlBtn" data-tid="4" data-toggle="tab" href="#html">
                                        <h6>html</h6>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="cssBtn" data-tid="5" data-toggle="tab" href="#css">
                                        <h6>css</h6>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="JavaScriptBtn" data-tid="6" data-toggle="tab" href="#JavaScript">
                                        <h6>JavaScript</h6>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="springmvcBtn" @click="toggle(7)" data-toggle="tab" href="#springmvc">
                                        <h6>springmvc</h6>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="springBtn" @click="toggle(8)" data-toggle="tab" href="#spring">
                                        <h6>spring</h6>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="mybatisBtn" @click="toggle(9)" data-toggle="tab" href="#mybatis">
                                        <h6>mybatis</h6>
                                    </a>
                                </li>
                            </ul>

                            <!--具体内容-->
                            <div class="tab-content border border-top-0" style="min-height: 797px">
                                <!--cyy-->
                                <video-container id="cyy" ref="cyy" tag="cyy" :container-data="jsonData"></video-container>
                                <!--java ee-->
                                <video-container id="ee" ref="ee" tag="ee" :container-data="jsonData"></video-container>

                                <!--mysql-->
                                <div class="tab-pane fade" id="mysql">
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item" id="mysqlC">
                                        </li>

                                        <div class="col-md-12 col-sm-6">
                                            <nav class="nav-fenye">
                                                <ul class="pagination" id="mysqlP" data-tID="2">
                                                    <!--通过ajax动态生成-->
                                                </ul>
                                            </nav>
                                        </div>
                                    </ul>
                                </div>
                                <!--html-->
                                <div class="tab-pane fade" id="html">
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item" id="htmlC">
                                        </li>

                                        <div class="col-md-12 col-sm-6">
                                            <nav class="nav-fenye">
                                                <ul class="pagination" id="htmlP" data-tID="2">
                                                    <!--通过ajax动态生成-->
                                                </ul>
                                            </nav>
                                        </div>
                                    </ul>
                                </div>
                                <!--css-->
                                <div class="tab-pane fade" id="css">
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item" id="cssC">
                                        </li>

                                        <div class="col-md-12 col-sm-6">
                                            <nav class="nav-fenye">
                                                <ul class="pagination" id="cssP" data-tID="2">
                                                    <!--通过ajax动态生成-->
                                                </ul>
                                            </nav>
                                        </div>
                                    </ul>
                                </div>
                                <!--JavaScript-->
                                <div class="tab-pane fade" id="JavaScript">
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item" id="JavaScriptC">
                                        </li>

                                        <div class="col-md-12 col-sm-6">
                                            <nav class="nav-fenye">
                                                <ul class="pagination" id="JavaScriptP" data-tID="2">
                                                    <!--通过ajax动态生成-->
                                                </ul>
                                            </nav>
                                        </div>
                                    </ul>
                                </div>
                                <!--springmvc-->
                                <div class="tab-pane fade" id="springmvc">
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item" id="springmvcC">
                                        </li>

                                        <div class="col-md-12 col-sm-6">
                                            <nav class="nav-fenye">
                                                <ul class="pagination" id="springmvcP" data-tID="2">
                                                    <!--通过ajax动态生成-->
                                                </ul>
                                            </nav>
                                        </div>
                                    </ul>
                                </div>
                                <!--spring-->
                                <div class="tab-pane fade" id="spring">
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item" id="springC">
                                        </li>

                                        <div class="col-md-12 col-sm-6">
                                            <nav class="nav-fenye">
                                                <ul class="pagination" id="springP" data-tID="2">
                                                    <!--通过ajax动态生成-->
                                                </ul>
                                            </nav>
                                        </div>
                                    </ul>
                                </div>
                                <!--mybatis-->
                                <div class="tab-pane fade" id="mybatis" ref="abc">
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item" id="mybatisC">
                                            <!--通过ajax动态生成-->
                                        </li>

                                        <div class="col-md-12 col-sm-6">
                                            <nav class="nav-fenye">
                                                <ul class="pagination" id="mybatisP" data-tID="2">
                                                    <!--通过ajax动态生成-->
                                                </ul>
                                            </nav>
                                        </div>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>

<template id="video-card">
    <div>
        <div class="card tabItem" v-for="(item,index) in containerData.list">
            <img :src="item.fileCover" class="card-img-top" alt="...">
            <div class="card-body" style="padding: 0.25em">
                <h5 class="card-title" style="margin-bottom: 0">{{item.fileName}}</h5>
                <p class="card-text" style="margin-bottom: 0.5rem">{{item.fileNote}}</p>

                <a :href="'/file/playVideo/' + item.fileID" class="btn btn-primary" >观看</a>
            </div>
        </div>
    </div>
</template>

<template id="video-container">
    <div class="tab-pane fade show active">
        <ul class="list-group list-group-flush">

            <li class="list-group-item">
                <video-card :container-data="containerData"></video-card>
            </li>

            <div class="col-md-12 col-sm-6" ref="pagination">
                <nav class="nav-fenye">
                    <ul class="pagination">
                        <!--通过ajax动态生成-->
                    </ul>
                </nav>
            </div>

        </ul>
    </div>
</template>

<script>
    //注册全局组件
    Vue.component('video-container',{
        props : ['tag','containerData'],
        template : "#video-container",
    })
    Vue.component('video-card',{
        props : ['containerData'],
        template : "#video-card",
    })

    let vm = new Vue({
        el : '#app',
        data : {
            jsonData : '',
            delID : 0,
            delIndex : 0,
        },
        methods : {
            initData(tid){//初始化数据
                axios({
                    method : "GET",
                    url:"/file/fileList/" + tid,
                }).then((response)=>{
                    console.log(response.data);
                    this.jsonData = response.data;
                    this.pagination(this.jsonData.totalPage,null)
                }).catch(function (error) {
                    console.log(error);
                });
            },
            toggle(tid,content){
                this.tid = tid
                console.log(this.tid)
                console.log(this.$refs.content)

                this.getNewPageByAjax(this.tid);
            },
            pagination(totalPage,keyWord){//生成页码列表
                $("#pagination").pagination({
                    pages: totalPage, //总页数
                    edges: 16, //默认访问
                    cssStyle: '', //写入自定义css
                    displayedPages: 5, //显示几个
                    onPageClick: (pageNumber, event)=> {
                        //点击时调用
                        console.log(pageNumber);
                        this.getNewPageByAjax(keyWord,pageNumber)
                    },
                    onInit: (pageNumber)=> {
                        //刷新时或初始化调用
                        if (pageNumber === '1'){
                            console.log("初始化加载数据")
                        }else{
                            this.getNewPageByAjax(null,pageNumber)
                        }
                    }
                });
            },
            getNewPageByAjax(tid){//ajax获取新页面信息
                axios({
                    method : "GET",
                    url:"/file/fileList/" + tid,
                }).then((response)=>{
                    this.jsonData = response.data
                    this.pagination(this.jsonData.totalPage,null)
                }).catch(function (error) {
                    console.log(error);
                });
            },
            del(id,index){//获得删除所需的信息
                this.delID = id;
                this.delIndex = index;
            },
            confirmDel(){//删除方法
                axios({
                    method : "GET",
                    url:"/file/del/" + this.delID,
                }).then((response)=>{
                    if (response.data === true){
                        this.jsonData.list.splice(this.delIndex,1)
                        Qmsg.success("删除成功",{position:'center'});
                    }else{
                        Qmsg.info("删除失败",{position:'center'});
                    }
                }).catch(function (error) {
                    Qmsg.info("删除失败",{position:'center'});
                });
            },
        },
        beforeMount (){//初始化数据
            console.log("页面挂载之前")
            /*消息弹窗全局配置*/
            Qmsg.config({
                showClose:true,
                timeout:2000,
                autoClose:true
            })
            this.initData(1)
        },
        mounted(){
            console.log("页面挂载之后")
        },
    });

</script>
</body>
</html>
